<script setup lang="ts">
  import { useLocale } from '@/locales/useLocale';
  import DynamicForm from '@/components/common/dynamicForm/DynamicForm.vue';
  import { DynamicFormOption, DynamicItem, DynamicSelectOption } from '@/components/types';
  import { useSendSmsCode } from '@/hooks/core/useSendSmsCode';
  import { watch } from 'vue';

  const schema = {
    drink: (value: any) => {
      if (value) {
        return true;
      }
      return 'You must choose a drink';
    },
    username: 'required',
    confirmedUsername: 'required|confirmed:@username',
    userAgreement: 'userAgreement',
    select: 'required',
    captcha: 'required',
    smsCode: 'required',
  };
  const initValues = {
    drink: '',
    username: '',
    confirmedUsername: '',
    userAgreement: false,
    select: '',
    captcha: '',
    smsCode: '',
  };
  function onSubmit(values: any) {
    console.log(JSON.stringify(values, null, 2));
  }

  const { t } = useLocale();
  const options = [
    {
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
    },
    {
      value: 'Option3',
      label: 'Option3',
    },
    {
      value: 'Option4',
      label: 'Option4',
    },
    {
      value: 'Option5',
      label: 'Option5',
    },
  ] as DynamicSelectOption[];
  const option2 = [
    {
      value: '',
      label: 'None',
    },
    {
      value: 'Tea',
      label: 'Tea',
    },
    {
      value: 'Coffee',
      label: 'Coffee',
    },
  ];

  const formOptions = [
    {
      name: 'username',
      placeholder: 'username',
      label: 'username',
      requiredField: true,
      is: DynamicItem.INPUT,
    },
    {
      name: 'confirmedUsername',
      placeholder: 'confirmedUsername',
      label: 'confirmedUsername',
      requiredField: true,
      is: DynamicItem.INPUT,
    },
    {
      name: 'userAgreement',
      is: DynamicItem.CHECKBOX,
      requiredField: true,
      checkboxContent: '用户协议',
    },
    {
      name: 'select',
      placeholder: 'Select',
      is: DynamicItem.SELECT,
      requiredField: true,
      options: options,
    },
    {
      name: 'drink',
      is: DynamicItem.RADIO,
      requiredField: true,
      options: option2,
    },
    {
      name: 'captcha',
      is: DynamicItem.CAPTCHA,
      label: 'captcha',
      placeholder: 'captcha',
      captchaUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      imgClick: () => {
        console.log('this');
      },
      requiredField: true,
    },
    {
      name: 'smsCode',
      is: DynamicItem.SMSCODE,
      label: 'smsCode',
      requiredField: true,
      placeholder: 'smsCode',
      sendSms: () => {
        console.log('this');
      },
    },
  ] as DynamicFormOption[];
</script>

<template>
  <DynamicForm
    as="ElForm"
    :validation-schema="schema"
    :initialValues="initValues"
    label-width="200px"
    label-position="right"
    :options="formOptions"
    @on-submit="onSubmit"
  />
</template>

<style lang="scss"></style>
